<template>
    <a-modal :title="'维护价格'" :visible="true" width="70%" :footer="null" @cancel="reset">
        <div class="main">
            <a-card>
                <a-table bordered :pagination="false" :columns="columns" :data-source="list">

                    <!-- <span slot="purchasePrice" slot-scope="txt, record,i">
                         <a-input-number style="width:150px" :min="0" @keydown="handleNumberInput" :value="record.purchasePrice" @blur="(e) => onChange(e, record, i, 'purchasePrice')" :disabled="disabled"/>
                      
                    </span> -->
                    <span slot="taxRate" slot-scope="txt, record,i">
                         <!-- <a-input-number style="width:150px" :min="0" @keydown="handleNumberInput" :value="record.taxRate" @blur="(e) => onChange(e, record, i, 'taxRate')" :disabled="disabled"/> -->
                        <a-input :disabled="disabled" :value="record.taxRate" @blur="(e) => onChange(e, record, i, 'taxRate')"
                            style="width:150px" type="number"></a-input>
                    </span>
                    <span slot="purchaseTaxTratePrice" slot-scope="txt, record,i">
                         <a-input-number style="width:150px" :min="0" @keydown="handleNumberInput" :value="record.purchaseTaxTratePrice" @blur="(e) => onChange(e, record, i, 'purchaseTaxTratePrice')" :disabled="disabled"/>
                        <!-- <a-input :value="record.purchaseTaxTratePrice"
                            @blur="(e) => onChange(e, record, i, 'purchaseTaxTratePrice')"
                            style="width:150px" type="number" :disabled="disabled"></a-input> -->
                    </span>
                    <span slot="callSamplePrice" slot-scope="txt, record,i">
                         <!-- <a-input-number style="width:150px" :min="0" @keydown="handleNumberInput" :value="record.callSamplePrice" @blur="(e) => onChange(e, record, i, 'callSamplePrice')" :disabled="disabled"/> -->
                        <a-input :value="record.callSamplePrice"
                            @blur="(e) => onChange(e, record, i, 'callSamplePrice')" style="width:150px" type="number"></a-input>
                    </span>

                </a-table>
            </a-card>
            <a-row style="margin-top:10px;display: flex;justify-content: flex-end;">
                <a-button :style="{ marginLeft: '8px' }" type="primary" @click="onSubmit">
                    提交
                </a-button>
            </a-row>
        </div>

    </a-modal>
</template>
  
<script>

const columns = [
    // {
    //     title: '采购价',
    //     scopedSlots: { customRender: 'purchasePrice' }
    // },
    {
        title: '税率',
        scopedSlots: { customRender: 'taxRate' }
    },
    {
        title: '采购含税价',
        scopedSlots: { customRender: 'purchaseTaxTratePrice' }
    },
    {
        title: '调样价',
        scopedSlots: { customRender: 'callSamplePrice' }
    },


]

const columns2 = [
    {
        title: '颜色',
        dataIndex: 'colorName'
    },
    {
        title: '规格',
        dataIndex: 'specsName'
    },
    // {
    //     title: '采购价',
    //     scopedSlots: { customRender: 'purchasePrice' }
    // },
    {
        title: '税率',
        scopedSlots: { customRender: 'taxRate' }
    },
    {
        title: '采购含税价',
        scopedSlots: { customRender: 'purchaseTaxTratePrice' }
    },
    {
        title: '调样价',
        scopedSlots: { customRender: 'callSamplePrice' }
    },

]
export default {
    components: {},

    props: {
        priceList: {
            type: Array,
            default: null
        },
        supplyCode: {
            type: String,
            default: null
        },
        priceProgramme: {
            type: String,
            default: null
        },
    },

    data() {
        return {
            columns,
            columns2,
            loading: false,
            disabled:false,
            list: [],
        }
    },

    created() {
        const { priceList, priceProgramme } = this.$props
        if (priceProgramme == "MATERIAL") {
            this.columns = this.columns2.filter((item) => {
                return item.dataIndex != "colorName";
            })
            this.columns = this.columns.filter((item) => {
                return item.dataIndex != "specsName";
            })
        }else if (priceProgramme == "SPECS") {
            this.columns = this.columns2.filter((item) => {
                return item.dataIndex != "colorName";
            })
        }else if (priceProgramme == "SPECS_COLOR"){
            this.columns = this.columns2
        }else{
            this.columns = this.columns2
            this.disabled = true
        }
        this.list = priceList
    },
    mounted() { },
    computed: {
        jobNumber() {
            return this.$store.getters.userInfo.workNo || ''
        }
    },
    methods: {
       handleNumberInput (e) {
      // 通过正则过滤小数点后两位
      e.target.value = e.target.value.match(/^\d*(\.?\d{0,7})/g)[0] || null;
    },
        onChange(e, record, i, type) {
            if (type == 'purchasePrice') {
                this.list[i].purchasePrice = e.target.value
            } else if (type == 'taxRate') {
                this.list[i].taxRate = e.target.value
            } else if (type == 'purchaseTaxTratePrice') {
                this.list[i].purchaseTaxTratePrice = e.target.value
            } else {
                this.list[i].callSamplePrice = e.target.value
            }
        },
        onSubmit() {
            console.log(this.list);
            this.$emit('closePrice', this.supplyCode, this.list)
        },
        reset() {
            this.$emit('closePrice')
        },
    }
}
</script>
<style scoped>
.info-action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

.ml-20 {
    margin-left: 20px;
}
</style>